<template>
	<view>
		<view class="top flex u-p-r-30">
			<view class="image">
				<image src="https://image.alhelp.net/uploads/20231104/dbf1bdf1eed21a3744f144fec93210f9.png" mode=""></image>
			</view>
			<view class="text font14 text-center u-flex-1">
				<view>为了更好地为你定制方案</view>
				<view>
					请<text style="font-weight:700;font-size: 32rpx;color: #000;">选择</text>你目前所在的城市
				</view>
			</view>
		</view>
		<view class="scroll-view-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
				<block v-for="(item,i) in province" :key="i">
					<view :class="['left-scroll-view-item',i===active?'active':'']" @click="activeChanged(i,item)"
						class="flex justify-center">
						<view class="text-ellipsis text-center" style="width: 140rpx;">{{item.title}}</view>
					</view>
				</block>
				<view style="height: 120rpx;"></view>
			</scroll-view>
			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
				<view style="padding: 30rpx;">
					<view v-for="(item2, i2) in city" :key="i2" style="display: inline-block;">
						<view class="city font14" :class="[ handleActive(item2)]" @click="active2Changed(i2,item2)">
							{{item2.title}}
						</view>
					</view>
				</view>
				<view style="height: 120rpx;"></view>
			</scroll-view>
		</view>
		<view class="bg-white u-p-l-40 u-p-r-40"
			style="height: 180rpx;jpadding-bottom: 40rpx;position: fixed;left: 0;right: 0;bottom: 0;">
			<view class="flex align-center flex-wrap u-p-t-20">
				<view class="u-font-28 color666">已选</view>
				<view class="font-28 bold u-m-l-30 flex align-center" v-for="(item,index) in chooseList" :key="index" @click="delCity(index)">
					<view class="text-ellipsis" style="max-width: 140rpx;">
						{{item.title}}
					</view>
					<u-icon name="close-circle" class="u-m-l-5" size="28"></u-icon>
				</view>
			</view>
			<view class="btn font13 ml-auto u-m-t-20" @click="confirm">提交</view>
		</view>
		<u-popup v-model="promptPopup" mode="center">
			<view class="box" v-if="isShow===1">
				<view class="font14" style="margin-bottom: 40rpx;">
					<text>提交后马上获得咨询老师的电话和微信直接联系！</text>
				</view>
				<view class="font14" style="margin-bottom: 80rpx;">
					<text>咨询老师也会看到你的电话和微信，及时联系你喔！</text>
				</view>
				<view class="cancellation" @click="close">
					<text class="fon14">取消</text>
				</view>
				<view class="confirm" @click="hand">
					<text class="font14">确认</text>
				</view>
			</view>
			<view class="box" v-if="isShow===2">
				<view class="font16 bold" style="color: #FBAC65;text-align: center;">
					添加老师的微信
				</view>
				<view class="font12" style="color: #AAAAAA;text-align: center;">
					你的信息会被严格保密，敬请放心
				</view>
				<view style="text-align: center;" class="codeImage">
					<image :src="picture.staffQrCode" mode=""></image>
				</view>
				<view class="cancellation">
					<text class="fon14" @click="copy">复制微信号</text>
				</view>
				<view class="confirm" @click="phone">
					<text class="font14">直接打电话</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCtiyList,
		postCtiyList
	} from '@/api/toolbox.js'
	export default {
		data() {
			return {
				chooseList: [],
				promptPopup: false,
				wh: 0,
				active: 0,
				active2: null,
				scrollTop: 0,
				province: [],
				title: '',
				code: '',
				title2: '',
				code2: '',
				picture: [],
				isShow: 0,
				city: []
			};
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight - 100
			this.gitCityData()
		},
		methods: {
			handleActive(row) {
				let index = this.chooseList.findIndex(e => e.code == row.code);
				return index > -1 ? 'active2' : '';
			},
			delCity(i) {
				this.chooseList.splice(i, 1);
			},
			activeChanged(i, item) {
				this.active = i
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
				this.code = item.code
				this.title = item.title
				this.city = this.province[i].child

			},
			active2Changed(i, item) {
				this.active2 = i
				this.code2 = item.code
				this.title2 = item.title
				item['proviceCode'] = this.province[this.active].code;
				if (this.chooseList.findIndex(e => e.code == item.code) > -1) return;
				if (this.chooseList.length == 3) {
					uni.showToast({
						title: '最多选择三个城市！',
						icon: 'none'
					});
					return;
				}
				this.chooseList.push(item);
			},
			confirm() {
				if (!this.chooseList.length) {
					uni.showToast({
						title: '请选择咨询城市',
						icon: 'none'
					})
					return
				}
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						title: '提示',
						content: '该功能需要用户授权登录，是否前往登录页',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login',
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				this.promptPopup = true;
				this.isShow = 1
			},
			close() {
				this.promptPopup = false;
			},
			copy() {
				
				uni.setClipboardData({
					data: this.picture.staffPhone,
					showToast: false,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},complete:(err)=>{
						console.warn('err: ',err);
					}
				});
				this.promptPopup = false;
			},
			phone() {
				this.promptPopup = false;
				uni.makePhoneCall({
					phoneNumber: this.picture.staffPhone,
					success(res) {
						console.log('打电话成功', res)
					},
					fail(err) {
						console.log('打电话失败', err)
					}
				});
			},
			async hand() {
				this.isShow = 2
				let govCode = []; //城市ID
				let fullName = []; //城市code
				let provinceCode = []; //省code
				this.chooseList.forEach(e => {
					govCode.push(e.code);
					fullName.push(e.title);
					provinceCode.push(e.proviceCode);
				})
				uni.showLoading({
					mask: true
				});
				// 【个性化定制】
				// 获取代理商 二维码、微信号、电话
				postCtiyList({
					"govCodes": govCode,
					"fullNames": fullName,
					"provinceCodes": provinceCode,
					"principalUerId": uni.getStorageSync("shareUserId") || '',
					'oneOnOne': true,
				}).then(res => {
					if (res.code == 100000) {
						this.picture = res.data
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			async gitCityData() {
				const res = await getCtiyList()
				this.province = res.data
				this.province.forEach(item => {
					if (item.child.length === 0) {
						item.child = [{
							code: item.code,
							title: item.title
						}]
					}
				})
				this.city = this.province[this.active].child
				this.title = this.province[0].title
				this.code = this.province[0].code
			}
		},
		watch: {
			title() {
				this.title2 = ''
				this.active2 = ''
			}
		}
	}
</script>

<style lang="scss">
	.top {
		.image {
			text-align: center;

			image {
				width: 150rpx;
				height: 110rpx;
			}
		}

		.text {
			height: 110rpx;
			background: #F7DD5E;
			border-radius: 120rpx 120rpx 120rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}

	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 240rpx;

			.left-scroll-view-item {
				line-height: 100rpx;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 28rpx;

				text {
					width: 200rpx;
					text-overflow: clip;
					white-space: nowrap;
					overflow: hidden;
				}


				// 激活项的样式
				&.active {
					background-color: #ffffff;
					position: relative;

					// 渲染激活项左侧的红色指示边线
					&::before {
						content: ' ';
						display: block;
						width: 12rpx;
						height: 38rpx;
						border-radius: 12rpx;
						background-color: #F7DD5E;
						position: absolute;
						margin-left: 20rpx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	.city {
		// height: 50rpx;
		border-radius: 40rpx;
		padding: 8rpx 24rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
		// line-height: 50rpx;
		border: 2rpx solid #F2F2F2;
		text-align: center;

		&.active2 {
			background: #F2F2F2;
			border: 2rpx solid #F7DD5E;
			color: #F7DD5E;
			box-shadow: 6rpx 6rpx 6rpx rgba(215, 215, 215, 0.62);
		}
	}

	.btn {
		width: 200rpx;
		height: 78rpx;
		border-radius: 100rpx;
		background: #FED534;
		text-align: center;
		line-height: 78rpx;
	}

	.box {
		width: 600rpx;
		// height: 600rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 60rpx;

		.image {
			text-align: center;

			image {
				width: 160rpx;
				height: 160rpx;
			}

			margin-bottom: 60rpx;
		}

		.cancellation {
			// width: 342rpx;
			height: 92rpx;

			border-radius: 62rpx;
			background: #73839A;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-left: 20rpx;
			// margin-bottom: 30rpx;
			margin: 0 auto 30rpx;
		}

		.confirm {
			// width: 342rpx;
			height: 92rpx;
			border-radius: 62rpx;
			background: #F7DD5E;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-left: 20rpx;
			margin: 0 auto;
		}

		.codeImage {
			margin-top: 60rpx;
			margin-bottom: 60rpx;

			image {
				width: 260rpx;
				height: 260rpx;
			}
		}
	}

	.closeIcon {
		position: absolute;
		top: 0;
		right: -20rpx;
	}
</style>